<template>
  <view class="user-lavel-log-layout">
    <my-header title="五日流水"></my-header>
    <my-content class="content">
      <view class="tab">
        <view
          class="tab_item"
          :class="[mode == item.id ? 'active' : '']"
          @click="changeTab(item.id)"
          v-for="item in tabData"
          :key="item.id"
        >
          <view class="tab_title">{{ item.title }}</view>
        </view>
      </view>
      <scroll-view
        class="scroll"
				refresher-background=""
        :refresher-triggered="refreshStatus"
        @refresherrefresh="refresh"
        :refresher-enabled="true"
        scroll-y="true"
        @scrolltolower="lower"
      >
        <view class="balance_box" v-if="balanceStatus == 1 && mode == 1">
          <view class="balance_header">
            <view>五日总流水：{{ total_pay }}</view>
            <view v-if="balanceStatus == 1">上次等级变化时间：{{ last_time }}</view>
          </view>
          <view class="balance_item" v-for="item in balanceData" :key="item.id">
            <view class="top">
              <view class="remark">{{ item.blind_box_name }}</view>
              <view class="amount remove">{{ item.total_pay }}</view>
            </view>
            <view class="bottom">
              <view class="time">{{ item.created_at }}</view>
            </view>
          </view>
        </view>

        <view class="balance_box" v-if="logData.length > 0 && mode == 2">
          <view class="balance_item" v-for="item in logData" :key="item.id">
            <view class="top">
              <view class="remark">等级{{ item.level_id }} -> 等级{{ item.new_level_id }}</view>
              <view class="amount add" v-if="item.new_level_id > item.level_id">升级</view>
              <view class="amount remove" v-if="item.new_level_id < item.level_id">降级</view>
              <view class="amount add" v-if="item.new_level_id == item.level_id">达标</view>
            </view>
            <view class="bottom">
              <view class="time">{{ item.created_at }}</view>
              <!-- <view class="aftet_amount">余额：{{item.after_amount}}</view> -->
            </view>
          </view>
        </view>
      </scroll-view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      mode: 1,
      balanceData: [],
      logData: [],
      tabData: [
        { id: 1, title: '五日流水' },
        { id: 2, title: '等级日志' },
      ],
      last_page: 0,
      page: 1,
      refreshStatus: false,
      total_pay: 0,
      balanceStatus: 0,
      last_time: '',
    }
  },
  onLoad() {},
  onShow() {
    this.refresh()
  },

  methods: {
    changeTab(id) {
      if (this.mode != id) {
        this.mode = id
        this.page = 1
        this.getBalance(2)
      }
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getBalance(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getBalance(2)
    },
    getBalance(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      if (this.mode == 1) {
        api.userLevelLogs
          .log({ page: this.page })
          .then((res) => {
            uni.hideLoading()
            if (res.code === 200) {
              this.total_pay = res.data.total_pay
              this.balanceStatus = res.data.status
              this.last_time = res.data.last_time
              if (type == 1) {
                this.balanceData = this.balanceData.concat(res.data.data)
              } else {
                this.balanceData = res.data.data
              }
              this.last_page = res.data.last_page

              this.refreshStatus = false
              if (this.last_page == this.page) {
                this.show('没有更多数据了')
              }
            }
          })
          .catch((error) => {
            console.log(error)
          })
      } else {
        api.userLevelLogs
          .index({ page: this.page })
          .then((res) => {
            uni.hideLoading()
            if (res.code === 200) {
              console.log(res.data.data)
              if (type == 1) {
                this.logData = this.logData.concat(res.data.data)
              } else {
                this.logData = res.data.data
              }
              this.last_page = res.data.last_page
              this.refreshStatus = false
              if (this.last_page == this.page) {
                this.show('没有更多数据了')
              }
            }
          })
          .catch((error) => {
            console.log(error)
          })
      }
    },
  },
}
</script>

<style lang="scss">
.user-lavel-log-layout {
  height: 100vh;
  background-color: #141414;
}
.content {
  height: 100%;
	display: flex;
	flex-direction: column;
  .tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80rpx;
    font-size: 30rpx;
    /* position: fixed;
    top: 0; */
    width: 100%;
		box-sizing: border-box;
		padding: 20rpx 40rpx 20rpx;
   /*  left: 0;
    z-index: 100; */
    .tab_item {
			flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      color: white;
			font-size: 26rpx;
			height: 46rpx;
			line-height: 46rpx;

      .tab_border {
        width: 50rpx;
        height: 5rpx;
      }
      &.active {
				background-image: url('https://www.dingxians.cn/upload/images/user/bg-tab-active.png');
				background-size: 100% 100%;
        /* .tab_border {
          background-color: #a361f6;
        } */
        .tab_title {
          /* font-weight: bold; */
          color: #DED000;
        }
      }
    }
  }

  .scroll {
		flex: 1;
		overflow: hidden;

    /* position: fixed;
    top: 100rpx;
    overflow-y: auto; */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .balance_box {
    display: flex;
    flex-direction: column;
    /* height: calc(100vh - 150rpx); */
		overflow: hidden;
		
		color: white;
		background-color: #1F1F1F;
		margin: 0 20rpx;

    .balance_header {
      font-size: 22rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* width: 710rpx; */
      padding: 0 0 20rpx;
    }
    .balance_item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 30rpx;
      /* width: 710rpx; */
      padding: 20rpx;
      border-bottom: 1rpx solid #292929;
			color: white;
      .top,
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          color: #808080;
          font-size: 24rpx;
					margin-top: 5rpx;
        }
        .amount {
          font-size: 28rpx;
          display: flex;
          align-items: center;
          &.add {
            color: #DED000;
          }
          &.remove {
            color: #E20404;
          }
        }
        .aftet_amount {
          color: #ccc;
        }
      }
    }
  }
}
</style>
